import { createContext, useContext } from "react";
//1. 在爷爷层 createContext 创建一个context对象

//2. 通过provider将爷爷层数据传递下去
//2. 孙子辈利用   useContext接受数据

const Msgctx = createContext(null);
function SonComponent() {
  const son = useContext(Msgctx);
  //   console.log(son);
  return (
    <div>
      <span>
        利用contextHooks来创建跨层组件的通信
        <span style={{ color: "red" }}>儿子</span>----{son}
      </span>
    </div>
  );
}

function FatherComponents() {
  const father = useContext(Msgctx);
  return (
    <div>
      <span>
        利用contextHooks来创建跨层组件的通信
        <span style={{ color: "red" }}>父亲</span>----{father}
      </span>
    </div>
  );
}
function GrandsonComponent() {
  const msg = "跨层传递数据";
  return (
    <div className="list">
      <h2> 利用contextHooks来创建跨层组件的通信</h2>
      <Msgctx.Provider value={msg}>
        <FatherComponents></FatherComponents>
        <SonComponent></SonComponent>
      </Msgctx.Provider>
    </div>
  );
}

export default GrandsonComponent;
